@extends('layouts.user_home')
@section('content')
		<link href="/home/css/addstyle.css" rel="stylesheet" type="text/css">
		<script src="/home/js/jquery-1.8.2.min.js"></script>
		<b class="line"></b>

		<div class="center">
			<div class="col-main">
				<div class="main-wrap">

					<div class="user-address">
						<!--标题 -->
						<div class="am-cf am-padding">
							<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">地址管理</strong> / <small>Address&nbsp;list</small></div>
						</div>
						<hr/>
						<ul id="addr" class="am-avg-sm-1 am-avg-md-3 am-thumbnails">
						@foreach($addr as $v)
							<li class="user-addresslist">
								<span class="new-option-r" title="/" id="{{$v->id}}"><i class="am-icon-check-circle"></i>设为默认</span>
								<p class="new-tit new-p-re">
									<span class="new-txt">{{$v->name}}</span>
									<span class="new-txt-rd2">{{$v->phone}}</span>
								</p>
								<div class="new-mu_l2a new-p-re">
									<p class="new-mu_l2cw" style="font-size:15px;">
										<span style="font-size:16px;font-weight:bold;">地址:</span>{{$v->address}}</p>
								</div>
								<div class="new-addr-btn">
									<!-- <a href=""><i class="am-icon-edit"></i>编辑</a>
									<span class="new-addr-bar">|</span> -->
									<a href="/addrdel/{{$v->id}}" onclick="delClick(this);"><i class="am-icon-trash"></i>删除</a>
								</div>
							</li>
							@endforeach
						</ul>
						<div class="clear"></div>
						<a class="new-abtn-type" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0}">添加新地址</a>
						<!--例子-->
						<div class="am-modal am-modal-no-btn" id="doc-modal-1">

							<div class="add-dress">

								<!--标题 -->
								<div class="am-cf am-padding">
									<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">新增地址</strong> / <small>Add&nbsp;address</small></div>
								</div>
								<hr/>

								<div class="am-u-md-12 am-u-lg-8" style="margin-top: 20px;">
									<form class="am-form am-form-horizontal">
										<input type="hidden" name="id" value="{{$id}}">
										<div class="am-form-group">
											<label for="user-name" class="am-form-label" >收货人</label>
											<div class="am-form-content">
												<input type="text" id="user-name" placeholder="收货人" name="name">
											</div>
										</div>

										<div class="am-form-group">
											<label for="user-phone" class="am-form-label" >手机号码</label>
											<div class="am-form-content">
												<input id="user-phone" placeholder="手机号必填" type="email" name="phone">
											</div>
										</div>

										<div class="am-form-group">
											<label for="user-intro" class="am-form-label">详细地址</label>
											<div class="am-form-content">
												<textarea class="" rows="3" id="user-intro" placeholder="输入详细地址"></textarea>
												<small>100字以内写出你的详细地址...</small>
											</div>
										</div>

										<div class="am-form-group">
											<div class="am-u-sm-9 am-u-sm-push-3">
												<a class="am-btn am-btn-danger" id="save">保存</a>
<!-- 												<a href="javascript: void(0)" class="am-close am-btn am-btn-danger" data-am-modal-close>取消</a> -->
											</div>
										</div>
									</form>
								</div>

							</div>

						</div>

					</div>

					<script type="text/javascript">
						$(document).ready(function() {							
							$(".new-option-r").click(function() {
								$(this).parent('.user-addresslist').addClass("defaultAddr").siblings().removeClass("defaultAddr");
							});
							
							var $ww = $(window).width();
							if($ww>640) {
								$("#doc-modal-1").removeClass("am-modal am-modal-no-btn")
							}
							
						})
						//添加地址
						$('#save').click(function(){
							var id = $("input[name='id']").val();
							var name = $("input[name='name']").val();
							var phone = $("input[name='phone']").val();
							var addr = $("textarea").val();
							$.ajax({
			                    type: 'get',
			                    url: '/addr',
			                    data:{uid:id,name:name,phone:phone,address:addr},
			                    dataType: 'json',
			                    success: function(data){
			                        if(data){
				                        	var str = '<li class="user-addresslist"><span class="new-option-r" id="'+data+'"><i class="am-icon-check-circle"></i>设为默认</span><p class="new-tit new-p-re"><span class="new-txt">'+name+'</span><span class="new-txt-rd2">'+phone+'</span></p><div class="new-mu_l2a new-p-re"><p class="new-mu_l2cw" style="font-size:15px;"><span style="font-size:16px;font-weight:bold;">地址:</span>'+addr+'</p></div><div class="new-addr-btn"><a href="/addrdel/'+data+'" onclick="delClick(this);"><i class="am-icon-trash"></i>删除</a></div></li>';
								$("#addr").append(str);
			                    }
			                        
			                    },
			                    error:function(data) {
			                        console.log(data.msg);
			                    },
			                });

						});
						//追加默认选中事件
						$('.new-option-r').live('click',function(){
							//追加默认
							$(this).parent('.user-addresslist').addClass("defaultAddr").siblings().removeClass("defaultAddr");
							//追加改状态
							var id = $(this).attr('id');
							$.ajax({
			                    type: 'get',
			                    url: '/addrstatus',
			                    data:{id:id},
			                    dataType: 'json',
			                    success: function(data){
									
			       
			                    },
			                    error:function(data) {
			                        console.log(data.msg);
			                    },
			                });							
						});
						//改状态
						$('.new-option-r').click(function(){
							var id = $(this).attr('id');
							$.ajax({
			                    type: 'get',
			                    url: '/addrstatus',
			                    data:{id:id},
			                    dataType: 'json',
			                    success: function(data){
									
			       
			                    },
			                    error:function(data) {
			                        console.log(data.msg);
			                    },
			                });
						});

					</script>

					<div class="clear"></div>

				</div>
@endsection